<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-23 23:21:34
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-23 23:46:59
 * @Description: demo04
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      class Article extends React.Component {
        
        static propTypes = {
          title: PropTypes.string.isRequired,
        }

        render() {
          return (
            <div>
              <h1>{this.props.title}</h1>
            </div>
          );
        }
      }
      // Article.propTypes = {
      //   title: PropTypes.string.isRequired,
      // };
      ReactDOM.render(
        <div>
          <Article title="学习React"></Article>
          {/*下面的会报错*/}
          <Article></Article>
        </div>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>
